<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>

  <body>
    <div id="app">
      <button v-on:click="handleClick">按钮</button>
      <div
        style="width: 100px; height: 100px; background-color: hotpink"
        @mousemove="handleMove"
      ></div>
      <p>{{num}}</p>
      <p><button @click="num++">加法按钮</button></p>
      <p><input type="text" @keyup.13="handleKeyUp" /></p>
      <a href="http://www.atguigu.com" @click.prevent="link">尚硅谷</a>
    </div>
    <script src="./js/vue.js"></script>
    <script>
      /*
          绑定指令事件 ：v-on （可简写@）
          事件中函数需要在methods中定义
  
  
          回调函数参数：
            1. 如果不需要参数或只需要event参数，直接写回调函数 @click="handler"
            2. 如果需要其他参数 @click="handler(1, 2, 3)"
            3. 如果需要其他参数和event参数 @click="handler($event, 1, 2, 3)"
          
          按键修饰符
            .keyCode  .13
            .keyName  .enter

          事件修饰符
            .prevent 阻止默认行为
            .stop    阻止事件冒泡
  
      */

      const vm = new Vue({
        //new Vue传递的对象是配置对象
        //非函数数据定义在 data中
        //配置对象 ：属性名固定的对象。写了准确的属性名能起到相应的作用，随便写的或写错了等于没写
        data: {
          num: 0,
        },
        methods: {
          handleClick() {
            console.log("hello 华哥", arguments);
          },
          handleMove() {
            console.log("move", arguments);
          },
          updateNum() {
            this.num++;
          },
          handleKeyUp(e) {
            // e.preventDefault();
            console.log("被触发了");
          },
        },
      });
      vm.$mount("#app");
    </script>
  </body>
</html>
